import AppStore from "@/store/app"
import {toHome} from "@/utils/pageRedirect"
import {View} from "@tarojs/components"
import Taro from "@tarojs/taro"
import React, {CSSProperties, useContext, useEffect} from "react"

const MyNav: React.FC<{
	color?: string
	showBack?: boolean
	style?: CSSProperties
}> = ({children, color, showBack = true, style}): JSX.Element => {
	const {
		mynav: {titleHeight, statuHeight},
		setMynav
	} = useContext(AppStore)

	useEffect(() => {
		let systemInfo = Taro.getSystemInfoSync()
		setMynav(systemInfo.statusBarHeight || 44, "statuHeight")
	}, [])

	return (
		<View
			style={{
				marginTop: statuHeight * 2 + "rpx",
				height: titleHeight * 2 + "rpx",
				lineHeight: titleHeight * 2 + "rpx"
			}}
			className="w-screen flex items-center z-50"
		>
			{showBack ? (
				<View
					className="w-12 h-12 text-17 ml-16 flex justify-center items-center border-solid border-t-0 border-l-2 border-r-0 border-b-2 transform rotate-45"
					style={{
						borderColor: color || "black"
					}}
					onClick={() => {
						Taro.navigateBack().catch(err => {
							toHome()
						})
					}}
				></View>
			) : (
				<View className="w-24 ml-16"></View>
			)}
			<View
				className="flex-1 ml-72 mr-100"
				style={Object.assign(
					{
						fontSize: "34rpx",
						overflow: "hidden",
						whiteSpace: "nowrap",
						textOverflow: "ellipsis",
						color: color || "black",
						fontWeight: "bold",
						textAlign: "center"
					},
					style
				)}
			>
				{children}
			</View>
		</View>
	)
}
export default MyNav
